<template>
  <el-card
    style="width: 100%"
    :style="{
      boxShadow: 'none',
      ...(ui.bodyStyle || {})
    }"
  >
    <template #header>
      <div class="el-form-item__label">
        <label>{{ service.title }}</label>
        <el-button
          v-if="ui.showButton"
          :class="['button', ui.buttonClass || '']"
          text
          >{{ ui.buttonText || "click" }}</el-button
        >
      </div>
    </template>
    <lc-sf
      :keyPath="keyPath"
      :schema="schema"
      :data="val[field]"
      :formChange="updateValue"
    />
  </el-card>
</template>

<script lang="ts" setup name="lc-sf-object">
import { inject, ref, reactive, computed } from "vue";
import { ObjectUI } from "../interface";
import { SFService } from "../sf.service";
import { NzSafeAny, TItemOption } from "../type";
const props = defineProps<TItemOption<ObjectUI>>();
const sf = inject<SFService>("sf-service");
const val = computed(() => {
  return sf.getVaule(props.keyPath);
});
const ui = props.service.getUI<ObjectUI>();
const schema = ref(props.service?.schema);
/** 当前字段属性 */
const properties = reactive(props.service?.params?.properties || {});
/** 所有字段集合 */
const keys = Object.keys(properties);
keys.forEach(k => {
  const ui = properties?.[k]?.ui;
  const preFormat = ui.preFormat;
  const dft =
    ui.widget === "array" ? [] : ui.widget === "object" ? {} : undefined;

  val.value[k] =
    (preFormat ? preFormat(val.value?.[k]) : val.value?.[k]) ||
    properties?.[k]?.default ||
    dft;
});
const updateValue = (val: NzSafeAny) => {
  if (ui.change) {
    ui.change(val);
  }
  sf.setVaule(props.keyPath, val);
};
</script>

<style>
.el-card__header {
  --el-card-padding: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
../types
